<template>
  <div id="root">
    <div class="todo-container">
      <div class="todo-wrap">
        <MyHeader :addTodo="addTodo"/>
        <List
            :todos="todos"
            :checkTodo="checkTodo"
            :deleteTodo="deleteTodo"
        />
        <MyFooter
            :todos="todos"
            :checkAllTodo="checkAllTodo"
            :clearAllDoneTodo="clearAllDoneTodo"
        />
      </div>
    </div>
  </div>
</template>

<script>
import MyHeader from "@/components/MyHeader";
import List from "@/components/List";
import MyFooter from '@/components/MyFooter';
export default {
  name: "App",
  components:{
    List,
    MyFooter,
    MyHeader
  },
  data() {
    return {
      todos: JSON.parse(localStorage.getItem("todos")) || []  // 从localStorage获取todos，如果没有则初始化为空数组,防止空指针
    }
  },
  methods:{
    //添加的todo
    addTodo(todo){
      console.log('我是app组件，我收到了数据');
      this.todos.unshift(todo);  //触发模板的重新解析
    },
    checkTodo(id){
      const todo = this.todos.find(todo => todo.id === id);  //先找到id对应的todo，然后修改done值
      todo.done = !todo.done;
    },
    deleteTodo(id){
      this.todos = this.todos.filter(todo => todo.id !== id);  //保留没有勾选的，勾选的会被删除
    },
    checkAllTodo(done){
      this.todos.forEach(todo => todo.done = done);  //全选中
    },
    clearAllDoneTodo(){
      this.todos = this.todos.filter(todo => !todo.done)  //全不选
    }
  },
  watch: {
    // 可以在这里添加监听器来响应数据变化
    
    todos: {
      deep: true, // 深度监听
      handler(newTodos) {
        // 这里可以添加代码来处理 todos 的变化
        localStorage.setItem('todos', JSON.stringify(newTodos)); // 将 todos 存储到 localStorage
      },
      
    }
  }
  
}
</script>

<style>
/*base*/
body {
  background: #fff;
}

.btn {
  display: inline-block;
  padding: 4px 12px;
  margin-bottom: 0;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
  border-radius: 4px;
}

.btn-danger {
  color: #fff;
  background-color: #da4f49;
  border: 1px solid #bd362f;
}

.btn-danger:hover {
  color: #fff;
  background-color: #bd362f;
}

.btn:focus {
  outline: none;
}

.todo-container {
  width: 600px;
  margin: 0 auto;
}
.todo-container .todo-wrap {
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
}

</style>


